<!--
 @description 门店信息创建项
 @fileName CreateItem.vue
 @author zengqiongying
 @created 2023/04/28 14:36:41
-->
<template>
  <div>
    <Cell title="门店经营业务类型" sub-title="请点击选择业务类型，可多选" custom isColumn required :right="false">
      <!-- <LabelSelect
        v-model="formData.businessType"
        v-model:label="formData.businessTypeName"
        url="/data-dict/app/v2/dictionary/BIZ_TYPE"
        label-name="dictName"
        value-name="dictCode"
        method="get"
        :params="dictParams"
        :multiple="true"
        :column="0"
      /> -->

      <LabelSelect
        v-model="formData.businessType"
        v-model:label="formData.businessTypeName"
        :url="`/app/v1/mdmService/custDocDef/page`"
        label-name="name"
        value-name="code"
        method="post"
        :params="{ query: { custDocCode: 'QY037' }, type: 0 }"
        :multiple="true"
        :column="0"
      />
    </Cell>
    <Cell
      v-model="formData.name"
      title="门店名称"
      placeholder="请输入"
      :maxlength="10"
      :right="false"
      is-input
      required
      inputAlign="right"
    />
    <FieldPicker
      v-model="formData.shopClassify"
      v-model:label="formData.shopClassifyName"
      title="门店类型"
      placeholder="请选择"
      :url="`/data-dict/app/v2/dictionary/SHOP_TYPE`"
      label-name="dictName"
      value-name="dictCode"
      method="get"
      :params="dictParams"
      clear
      required
    />
    <!-- <FieldPicker
      v-model="formData.countryCode"
      v-model:label="formData.countryName"
      title="国别"
      placeholder="请选择"
      :url="`/app/v1/mdmService/country/page`"
      label-name="name"
      value-name="code"
      method="post"
      :params="{ query: { status: { operator: '=', value: 1 }, name: '中国' }, type: 0 }"
      clear
      required
    /> -->
    <Cell :modelValue="formData.countryName" title="国别" placeholder="选择国别" required @right="onSearchCountry" />
    <FieldArea
      v-if="formData.countryCode === 'CN'"
      title="所在省市区"
      v-model="areaData"
      :option="areaOption"
      fieldKey="id"
      :requiredLevle="4"
      :required="formData.countryCode === 'CN'"
    />
    <Cell
      v-model="formData.shopAddr"
      title="详细地址"
      placeholder="请输入"
      :maxlength="50"
      :right="false"
      is-input
      inputAlign="right"
      required
    />
    <Cell
      v-model="formData.floor"
      title="所在楼层"
      placeholder="请输入"
      :maxlength="50"
      :right="false"
      is-input
      inputAlign="right"
      required
    />
    <FieldPicker
      v-model="formData.cityLevel"
      v-model:label="formData.cityLevelName"
      title="城市级别"
      placeholder="请选择"
      :url="`/data-dict/app/v2/dictionary/CITY_LEVEL`"
      label-name="dictName"
      value-name="dictCode"
      method="get"
      :params="dictParams"
      clear
      required
    />
    <FieldPicker
      v-model="formData.marketLevelCode"
      v-model:label="formData.marketLevelName"
      title="市场层级"
      placeholder="请选择"
      :url="`/data-dict/app/v2/dictionary/MARKET_LEVEL`"
      label-name="dictName"
      value-name="dictCode"
      method="get"
      :params="dictParams"
      clear
      required
    />
    <Cell
      v-model="formData.shopInfoPhone"
      title="门店咨询电话"
      placeholder="请输入"
      :maxlength="50"
      :right="false"
      is-input
      inputAlign="right"
      required
      type="tel"
    />
    <Cell
      v-model="formData.shopServPhone"
      title="售后电话"
      placeholder="请输入"
      :maxlength="50"
      :right="false"
      is-input
      inputAlign="right"
      required
      type="tel"
    />
    <Cell
      v-model="formData.outpicArea"
      title="出图总面积(㎡)"
      placeholder="请输入"
      :maxlength="50"
      :right="false"
      is-input
      inputAlign="right"
      required
    />
    <Cell title="是否装修门头" custom :right="false" required>
      <qmp-switch v-model="formData.isDecorationDoorHead">
        <template #background>
          <span class="qmp-switch__background"> {{ formData.isDecorationDoorHead ? '是' : '否' }}</span>
        </template>
      </qmp-switch>
    </Cell>
    <Cell
      v-if="formData.isDecorationDoorHead"
      v-model="formData.doorHeadArea"
      title="门头面积(㎡)"
      placeholder="请输入"
      :maxlength="50"
      :right="false"
      is-input
      inputAlign="right"
      :required="formData.isDecorationDoorHead"
    />
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, defineComponent, watch, getCurrentInstance } from 'vue'
  import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
  import Cell from '@/components/Cell/index.vue'
  import FieldArea from '@/components/FieldArea/index.vue'
  import FieldPicker from '@/components/FieldPicker/index.vue'
  import LabelSelect from '@/components/LabelSelect/index.vue'
  // import FieldSelect from '@/components/FieldSelect/index.vue'
  import { initFormData } from '@/utils'
  export default defineComponent({
    name: 'DealerCustomerShopsCreateItem',
    components: { Cell, FieldPicker, FieldArea, LabelSelect },
    props: {
      modelValue: {
        type: Object,
        default: () => {}
      }
    },
    setup(props, { emit }) {
      const instance = getCurrentInstance()
      const { proxy }: any = instance
      const $router = useRouter()
      const $route = useRoute()
      const datas = reactive({
        dictParams: { query: { appCode: 'slm', domainCode: 'marketing' }, type: 0 },
        areaData: {
          provinceCode: '',
          provinceName: '',
          province: '',
          cityCode: '',
          cityName: '',
          city: '',
          countyCode: '',
          countyName: '',
          county: '',
          townCode: '',
          townName: '',
          town: ''
        },
        areaOption: {
          provinceId: 'province',
          province: 'provinceName',
          provinceCode: 'provinceCode',
          cityId: 'city',
          city: 'cityName',
          cityCode: 'cityCode',
          districtId: 'county',
          district: 'countyName',
          districtCode: 'countyCode',
          townId: 'town',
          town: 'townName',
          townCode: 'townCode'
        },
        formData: {
          id: '',
          name: '',
          businessType: [],
          businessTypeName: '',
          shopClassify: '',
          shopClassifyName: '',
          countryCode: 'CN',
          countryName: '中国',
          shopAddr: '',
          floor: '',
          cityLevel: '',
          cityLevelName: '',
          marketLevelCode: '',
          marketLevelName: '',

          shopInfoPhone: '',
          shopServPhone: '',
          outpicArea: '',
          isDecorationDoorHead: false,
          doorHeadArea: ''
        }
      })
      watch(
        () => props.modelValue,
        (d) => {
          initFormData(d, datas.areaData)
          initFormData(d, datas.formData)
          if (['', null, undefined].includes(datas.formData.countryCode)) {
            datas.formData.countryCode = 'CN'
            datas.formData.countryName = '中国'
          }
        },
        {
          deep: true,
          immediate: true
        }
      )
      watch(
        () => datas.areaData,
        (d) => {
          datas.formData = { ...datas.formData, ...d }
        },
        {
          deep: true,
          immediate: true
        }
      )
      watch(
        () => datas.formData,
        (d) => {
          emit('update:modelValue', { ...props.modelValue, ...d })
        },
        {
          deep: true,
          immediate: true
        }
      )
      const onSearchCountry = () => {
        const tmpId = new Date().getTime()
        proxy.$SimpleEvents.registerEvent('ResearchCountrySelected', (data: any) => {
          if (tmpId === Number(data.operatorId || 0)) {
            const formData = datas.formData
            datas.formData = {
              ...formData,
              ...{
                countryName: data.name,
                countryCode: data.code
              }
            }
          }
        })
        $router.push({
          path: '/search/country',
          query: {
            id: tmpId
          }
        })
      }
      return {
        ...toRefs(datas),
        onSearchCountry
      }
    }
  })
</script>
<style lang="less" scoped></style>
